import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Form } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DropDownSelectObj } from '@/components/DropDownSelect';
import { UmiComponentProps, SearchComponentProps } from '@/common/type';

interface P {
  dict?: any;
  cond?: {
    ownerId: string;
    pageNum: number;
    pageSize: number;
  };
  brandData: Array<any>;
  productData: Array<any>;
}

type Props = P & UmiComponentProps & SearchComponentProps;

const FormItem = Form.Item;

@connect(({ device_fire_monitor }) => ({
  dict: device_fire_monitor.dict,
  cond: device_fire_monitor.cond,
}))
class Search extends Component<Props, any> {
  state = {
    option: null,
    brandOption: null
  };

  showUpload = (v) => {
    const { dispatch } = this.props;
    dispatch({ type: 'devices/queryTemple', payload: { type: 'device_fire_monitor' } })
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { buildList, brandList } = values;
        if (Array.isArray(buildList)) {
          let build_len = buildList.length;
          if (build_len > 0) {
            switch (build_len) {
              case 1: values.buildId = buildList[0]; break;
              case 2: values.floorId = buildList[1]; break;
              case 3: values.areaId = buildList[2]; break;
            }
          }
        }
        if (Array.isArray(brandList)) {
          let brand_len = brandList.length;
          if (brand_len > 0) {
            switch (brand_len) {
              case 1: values.brandId = brandList[0]; break;
              case 2: values.productId = brandList[1]; break;
            }
          }
        }
        delete values.buildList;
        delete values.brandList;
        dispatch({
          type: 'device_fire_monitor/updateCond',
          payload: {
            ...values
          }
        });
        this.props.initCurrent()
      }
    });
  };
  private handleChange = (type: string, value: number | string) => {
    const { cond = {}, dispatch } = this.props;
    cond[type] = value;

    dispatch({
      type: 'device_fire_monitor/updateCond',
      payload: cond
    })
  }
  render() {
    const { dict = {} } = this.props;

    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={4} span={5}>
            <FormItem
              label="联网状态"
              {...formItemLayout}
            >
              {getFieldDecorator('runStatus')(
                DropDownSelectObj({
                  dict, type: 'device.run.status',
                  onChange: (v: any) => this.handleChange('runStatus', +v)
                })
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={5} span={19}>
            <SearchRow type="flex" justify="end">
              <SearchButton htmlType="submit">搜索</SearchButton>
              <SearchButton onClick={(e) => {
                this.props.form.resetFields();
                this.search(e)
              }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>
              <SearchButton icon="select" style={{ marginLeft: '10px' }} onClick={this.showUpload}>导入</SearchButton>
              <Link to='/data/device_fire_monitor/new'><SearchButton icon='plus' type="primary" style={{ marginRight: 30 }}>新增</SearchButton></Link>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
